<template>
  <div class="materialBox flex_b">
    <el-carousel indicator-position="outside" trigger="click"
      arrow="never" :loop="true" :interval="10000">
      <el-carousel-item v-for="(item, index) in tabData" :key="index">
        <div class="flex_b" style=" width: 100%; height: 100%;">
          <v-tab :tabData="tabData" :tabDeploy="tabDeploy"
           :tabStyle="tabStyle1" style="width:30%"></v-tab>
          <div class="pieGroup flex_w" style="width:68%" id="pieGroup">
            <div ><!-- v-if="showpie" -->
              <ve-pie v-for="(pieItem, pieIndex) in pieData"
              :key="pieIndex" :data="pieItem" :legend-visible="legend"
              :settings="chartSettings" :title="title[pieIndex]" :backgroundColor="backgroundColor"
              :width="width/4+ 'px'" :height="width/4.2+ 'px'"></ve-pie>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs';
  
  import Tab from "../public/Tab.vue"
  
  export default {
    name: 'Material',
    components: {
      'v-tab': Tab,
    },
    props: {

    },

    data () {
      this.chartSettings = {                            //表格配置项
        radius:50,
        center: 10,
        offsetY: '35%',
        label:{show: false},
      }

      return {
        timeOut: '',                                    //计时器
        tabStyle1: 'tabStyle1',                         //表格样式
        itemNum: '',                                    //一页表格，饼图的数量
        tabData: [                                      //表格数据（详见接口文档）
          {id:121212121, order: 121212121, shouldGet: 465, realityGet: 456},
          {id:121212121, order: 121212121, shouldGet: 465, realityGet: 456},
          {id:121212121, order: 121212121, shouldGet: 465, realityGet: 456},
          {id:121212121, order: 121212121, shouldGet: 465, realityGet: 456},
          {id:121212121, order: 121212121, shouldGet: 465, realityGet: 456},
        ],
        tabDeploy:[                                     //表格配置
          {label: "订单号", prop: "order", width: "", align: "center", headerAlign: "center"} ,
          {label: "应领取", prop: "shouldGet", width: "", align: "center", headerAlign: "center"} ,
          {label: "实际领取", prop: "realityGet", width: "", align: "center", headerAlign: "center"} ,
        ],
        showpie: false,                                 //显示数据 
        width: 700,                                      //饼图组的宽度 
        pieData: [                                      //饼图数据 
          {
            columns: ['value1', 'value2'],
            rows: [
              { 'value1': '应领取', 'value2': 465 },
              { 'value1': '实际领取', 'value2': 465 },
            ]
          },
          {
            columns: ['value1', 'value2'],
            rows: [
              { 'value1': '应领取', 'value2': 465 },
              { 'value1': '实际领取', 'value2': 465 },
            ]
          },
          {
            columns: ['value1', 'value2'],
            rows: [
              { 'value1': '应领取', 'value2': 465 },
              { 'value1': '实际领取', 'value2': 465 },
            ]
          },
          {
            columns: ['value1', 'value2'],
            rows: [
              { 'value1': '应领取', 'value2': 465 },
              { 'value1': '实际领取', 'value2': 465 },
            ]
          },
        ],
        title: [                                        //饼图抬头
          // {
          //   text: '牌价变动曲线',
          //   left: 'center',
          //   textStyle: {
          //     color: "#fff",
          //     fontWeight: 500
          //   },
          // },
          // {
          //   text: '牌价变动曲线',
          //   left: 'center',
          //   textStyle: {
          //     color: "#fff",
          //     fontWeight: 500
          //   },
          // },
          //  {
          //   text: '牌价变动曲线',
          //   left: 'center',
          //   textStyle: {
          //     color: "#fff",
          //     fontWeight: 500
          //   },
          // },
          //  {
          //   text: '牌价变动曲线',
          //   left: 'center',
          //   textStyle: {
          //     color: "#fff",
          //     fontWeight: 500
          //   },
          // },
        ],
        backgroundColor: 'rgba(0, 0, 0, 0)',
        legend: false,                                //是否显示legend
      }
    },

    created () {
      let that = this;
      //  that.$nextTick(() => {
      //    var box = document.getElementById("pieGroup");
      //    console.log("box",box);
      //    console.log("box",box,box.clientWidth,box.offsetWidth);
      //    that.width = box.clientWidth;
      //    document.body.clientHeight >= 1000 ? that.itemNum = 16 : that.itemNum = 12
      //  });

      //setTimeout(function(){                                            //接口确定后删除
        let data = [];
        //分组
        // for(var i = 0, len = that.tabData.length; i < len;i += that.itemNum){
        //   data.push(that.tabData.slice(i,i + that.itemNum));
        // }
        //that.tabData = data;

        // that.tabData.map((items, index) => {
        //   that.pieData.push([])
        //   that.title.push([])
        //   items.map(item => {
        //     that.pieData[index].push(
        //       {
        //         columns: ['value1', 'value2'],
        //         rows: [
        //           { 'value1': '应领取', 'value2': item.shouldGet },
        //           { 'value1': '实际领取', 'value2': item.realityGet },
        //         ]
        //       });
        //     that.title[index].push(
        //       {
        //         text: item.id,
        //         left: 'center',
        //         bottom: '20%',
        //         textStyle: {
        //           color: "#fff",
        //           fontWeight: 500
        //         }
        //       }
        //     )
        //   })
        //   console.log(that.pieData)
        //   console.log(that.title)
        // })
        //that.chartSettings.radius = that.width/16;
        //that.showpie = true;
     // },1000)

      // that.loadTab ();                       //接口确定后解开

      // that.timeOut = setInterval(function(){
      //   that.loadTab();
      // },60*60*1000);

    },

    // destroyed () {
    //   clearInterval(this.timeOut)
    // },

    methods: {
      loadTab () {
        let that = this;
        axios.post(this.host+'')
        .then(res=>{                            //接口确定后解开
          // console.log(res.data);
        //   that.tabData = res.data;
        //   let data = [];
        //   for(var i = 0, len = that.tabData.length; i < len;i += that.itemNum){
        //     data.push(that.tabData.slice(i,i + that.itemNum));
        //   }
        //   that.tabData = data;
        //   that.tabData.map((items, index) => {
        //   that.pieData.push([])
        //   that.title.push([])
        //   items.map(item => {
        //     that.pieData[index].push(
        //       {
        //         columns: ['value1', 'value2'],
        //         rows: [
        //           { 'value1': '应领取', 'value2': item.shouldGet },
        //           { 'value1': '实际领取', 'value2': item.realityGet },
        //         ]
        //       });
        //     that.title[index].push(
        //       {
        //         text: item.id,
        //         left: 'center',
        //         bottom: '20%',
        //         textStyle: {
        //           color: "#fff",
        //           fontWeight: 500
        //         }
        //       })
        //   })
        //   console.log(that.pieData)
        //   console.log(that.title)
        // })
        // that.chartSettings.radius = that.width/16
        // that.showpie = true
        })
        .catch(error=>{
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
  .materialBox{
    height: 100%;
  }
  .pieGroup{
    margin-left: 2%;
    border-radius: 8px; 
    background: #3b496e;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #465380 0%, #304462 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #465380), color-stop(100%, #304462));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #465380 0%, #304462 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #465380 0%, #304462 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #465380 0%, #304462 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #465380 0%, #304462 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#465380, endColorstr=#304462, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
</style>


